<template>
  <div class="home">
    <div class="header">
      <img src="@/assets/cbe-logo.jpg" alt="" />
      <div class="log-out" @click="loginOut">退出系统</div>
    </div>

    <div class="add-btn" @click.stop="addCustomer"></div>
    <div class="home-main">
      <!--      <div>客户信息系统</div>-->
      <filter-comp @search="search" />

      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="customer-item"
            v-for="(item, index) of customerData"
            :key="index"
            @click="toCustom(item)"
          >
            <div class="item-info">
              <div class="info-name">{{ item.zhName }}</div>
              <div>简称：{{ item.zhShortName }}</div>
              <div class="intro" v-html="item.briefIntro"></div>
            </div>
            <img :src="getLogo(item.logo)" v-if="item.logo" alt="" />
          </div>
        </van-list>
      </van-pull-refresh>

      <van-back-top class="custom-back" right="2rem" bottom="5rem" />
    </div>
  </div>
</template>

<script setup lang="ts" name="PageHome">
import { ref } from "vue";
import FilterComp from "./filterComp.vue";
import { searchCustomList } from "@/views/home/fetchData";
import { getLogo } from "@/utils";
import { useRouter } from "vue-router";
import { showConfirmDialog } from "vant";
import useUserStore from "@/store/modules/user";

const router = useRouter();
const userStore = useUserStore();
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(true);
const customerData = ref<Record<string, any>[]>([]);
const filterForm = ref<Record<string, any>>({});
const query = ref({
  pageNum: 1,
  pageSize: 100
});
const total = ref(0);

function search(data: any) {
  refreshing.value = true;
  filterForm.value = data;
  onRefresh();
}

function onRefresh() {
  loading.value = true;
  finished.value = false;
  onLoad();
}

function onLoad() {
  if (refreshing.value) {
    query.value.pageNum = 1;
    customerData.value = [];
    refreshing.value = false;
  }

  searchCustomList({ ...query.value, ...filterForm.value }).then((res: any) => {
    customerData.value = res.rows || [];
    total.value = res.total || 0;
    if (customerData.value.length < total.value) {
      customerData.value = customerData.value.concat(res.rows);
      finished.value = false;
      ++query.value.pageNum;
    } else {
      finished.value = true;
    }
  });
}

function addCustomer() {
  userStore.customInfo = {};
  router.push({ name: "CustomDetail" });
}

function toCustom(item: Record<string, any>) {
  userStore.customInfo = {};
  router.push({ name: "Custom", query: { id: item.id } });
}

function loginOut() {
  showConfirmDialog({
    title: "退出登录",
    message: "确认退出登录？"
  })
    .then(async () => {
      await userStore.logout();
      await router.push("/login");
    })
    .catch(() => {});
}

onLoad();
</script>
<style lang="less">
.custom-back.van-back-top {
  background-color: #ff4350;
}
</style>
<style lang="less" scoped>
.home {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 0 0 0.5rem 0.5rem;

    img {
      width: 4rem;
      height: 4rem;
    }

    .log-out {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .add-btn {
    position: absolute;
    right: 1rem;
    bottom: 5rem;
    width: 4.5rem;
    height: 4.5rem;
    background: url("@/assets/add.png") no-repeat center;
    background-size: contain;
    z-index: 9;
  }

  .home-main {
    height: 0;
    flex: 1;
    padding: 0.5rem;
    background-color: #eee;
    overflow: auto;

    .customer-item {
      display: flex;
      justify-content: space-between;
      margin-top: 0.5rem;
      padding: 0.6rem;
      font-size: 0.9rem;
      background-color: #fff;
      border-radius: 0.4rem;

      .item-info {
        width: calc(100% - 3.6rem);

        .info-name {
          margin-bottom: 0.4rem;
          font-size: 1rem;
          font-weight: 700;
        }

        .intro {
          margin-top: 0.4rem;
          display: -webkit-box;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }

      img {
        width: 3rem;
        height: 3rem;
        object-fit: contain;
        border-radius: 0.6rem;
      }
    }
  }
}
</style>
